<template>
  <div>echarts</div>
  <div id="box" style="height: 600px; border: 1px solid #000"></div>
  <div id="box2" style="height: 600px; border: 1px solid #000"></div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import { onMounted, ref, onBeforeUnmount } from "vue";

interface DataItemType {
  value: number;
  name: string;
}

const size = () => {
  myChart.resize();
  console.log(1);
};
const size2 = () => {
  myChart2.resize();
  console.log(2);
};

let myChart: any;
const data = ref<DataItemType[]>([]);
onMounted(() => {
  setTimeout(() => {
    data.value = [
      { value: 1048, name: "Search Engine" },
      { value: 735, name: "Direct" },
      { value: 580, name: "Email" },
      { value: 484, name: "Union Ads" },
      { value: 300, name: "Video Ads" },
    ];
    // 基于准备好的dom，初始化echarts实例
    myChart = echarts.init(document.getElementById("box") as HTMLElement);
    // 绘制图表
    myChart.setOption({
      title: {
        text: "地区分布",
      },
      legend: {
        top: "center",
        left: "15%",
        orient: "vertical",
        itemGap: 40,
        // formatter: "Legend {name}"
        formatter: function (name: string) {
          const val = data.value.find((item) => item.name === name);
          return "Legend " + name + "-" + (val && val.value);
        },
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: ["30%", "60%"],
          center: ["70%", "50%"],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: "#fff",
            borderWidth: 2,
          },
          data: data.value,
        },
      ],
    });

    addEventListener("resize", size);
  }, 500);
});

let myChart2: any;
const data2 = ref<any>([]);
onMounted(() => {
  setTimeout(() => {
    data2.value = [
      {
        month: "1月",
        a: 150,
        b: 110,
      },
      {
        month: "2月",
        a: 200,
        b: 130,
      },
      {
        month: "3月",
        a: 230,
        b: 120,
      },
      {
        month: "4月",
        a: 180,
        b: 240,
      },
    ];
    // 基于准备好的dom，初始化echarts实例
    myChart2 = echarts.init(document.getElementById("box2") as HTMLElement);
    // 绘制图表
    myChart2.setOption({
      title: {
        text: "交易总金额",
        subtext: "单位(万元)",
      },
      legend: {
        data: ["a", "b"],
        left: "right",
      },
      xAxis: {
        type: "category",
        data: data2.value.map((item: any) => item.month),
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: "a",
          data: data2.value.map((item: any) => item.a),
          type: "line",
          smooth: true,
        },
        {
          name: "b",
          data: data2.value.map((item: any) => item.b),
          type: "line",
          smooth: true,
        },
      ],
    });

    addEventListener("resize", size2);
  }, 500);
});

onBeforeUnmount(() => {
  removeEventListener("resize", size);
  removeEventListener("resize", size2);
  myChart.dispose();
  myChart2.dispose();
});
</script>
